<!-- 博客分类详情页 -->

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 分类信息
const category = ref({
  id: route.params.id,
  name: '游戏讨论',
  description: '最新游戏资讯，游戏攻略分享，玩家交流互动',
  posts: '125.8万',
  followers: '23.5万',
  isFollowing: false,
  bgColor: 'bg-indigo-50',
  iconColor: 'text-indigo-500',
  icon: 'GameController'
})

// 帖子列表
const posts = ref([
  {
    id: 1,
    title: '《赛博朋克2077》新DLC体验分享',
    content: '最近体验了新DLC，感觉游戏优化提升很大，画面和剧情都很惊艳...',
    author: {
      name: '游戏玩家A',
      avatar: 'https://picsum.photos/40/40?random=1'
    },
    publishTime: '2小时前',
    views: '1.2万',
    likes: 328,
    comments: 89,
    tags: ['赛博朋克', '游戏体验'],
    images: ['https://picsum.photos/300/200?random=1']
  },
  {
    id: 2,
    title: '2024年最值得期待的游戏盘点',
    content:
      '整理了一下今年即将发售的重磅游戏，一起来看看有哪些值得期待的作品...',
    author: {
      name: '游戏评测员',
      avatar: 'https://picsum.photos/40/40?random=2'
    },
    publishTime: '4小时前',
    views: '8,932',
    likes: 245,
    comments: 67,
    tags: ['游戏前瞻', '新作发售'],
    images: ['https://picsum.photos/300/200?random=2']
  }
])

// 热门话题
const topics = ref([
  { id: 1, name: '游戏优化', count: '2.5万' },
  { id: 2, name: '新作发售', count: '1.8万' },
  { id: 3, name: '攻略分享', count: '1.6万' },
  { id: 4, name: '游戏bug', count: '1.2万' },
  { id: 5, name: '游戏资讯', count: '1.1万' }
])

// 切换关注状态
const toggleFollow = () => {
  category.value.isFollowing = !category.value.isFollowing
}

// 点赞帖子
const likePost = (post: any) => {
  post.likes++
}

// 跳转到帖子详情
const goToBlog = (id: number) => {
  router.push(`/blogArticle/${id}`)
}

// 跳转到话题页面
const goToTopic = (topicId: number) => {
  router.push(`/forum/category/${topicId}`)
}
</script>

<template>
  <div class="space-y-6 mx-40">
    <!-- 分类头部 -->
    <div class="bg-white rounded-lg p-6 mt-6">
      <div class="flex items-start justify-between">
        <div class="flex items-start gap-6">
          <!-- 图标 -->
          <div
            :class="[
              category.bgColor,
              'w-16 h-16 rounded-lg flex items-center justify-center'
            ]"
          >
            <el-icon :class="[category.iconColor, 'text-3xl']">
              <component :is="category.icon" />
            </el-icon>
          </div>

          <!-- 信息 -->
          <div>
            <h1 class="text-2xl font-bold mb-2">{{ category.name }}</h1>
            <p class="text-gray-500 mb-4">{{ category.description }}</p>
            <div class="flex items-center gap-6 text-sm text-gray-500">
              <span class="flex items-center gap-1">
                <el-icon><Document /></el-icon>
                {{ category.posts }} 帖子
              </span>
              <span class="flex items-center gap-1">
                <el-icon><User /></el-icon>
                {{ category.followers }} 关注
              </span>
            </div>
          </div>
        </div>

        <!-- 关注按钮 -->
        <el-button
          :type="category.isFollowing ? 'default' : 'primary'"
          size="large"
          @click="toggleFollow"
        >
          {{ category.isFollowing ? '已关注' : '关注' }}
        </el-button>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      <!-- 帖子列表 -->
      <div class="lg:col-span-3 space-y-4">
        <el-card
          v-for="post in posts"
          :key="post.id"
          class="hover:shadow-lg transition-all"
        >
          <!-- 帖子头部 -->
          <div class="flex items-center gap-3 mb-3">
            <el-avatar
              :size="40"
              :src="post.author.avatar"
            />
            <div>
              <div class="font-bold">{{ post.author.name }}</div>
              <div class="text-gray-500 text-sm">{{ post.publishTime }}</div>
            </div>
          </div>

          <!-- 帖子内容 -->
          <div
            class="cursor-pointer"
            @click="goToBlog(post.id)"
          >
            <h3 class="text-xl font-bold mb-2 hover:text-blue-500">
              {{ post.title }}
            </h3>
            <p class="text-gray-600 text-sm mb-3">{{ post.content }}</p>

            <!-- 图片 -->
            <div class="grid grid-cols-2 gap-2 mb-3">
              <el-image
                v-for="(image, index) in post.images"
                :key="index"
                :src="image"
                fit="cover"
                class="w-full h-[150px] rounded"
              />
            </div>
          </div>

          <!-- 帖子底部 -->
          <div class="flex items-center justify-between text-sm text-gray-500">
            <div class="flex items-center gap-4">
              <button class="flex items-center gap-1 hover:text-red-500">
                <el-icon><View /></el-icon>
                {{ post.views }}
              </button>
              <button
                class="flex items-center gap-1 hover:text-red-500"
                @click="likePost(post)"
              >
                <el-icon><StarFilled /></el-icon>
                {{ post.likes }}
              </button>
              <button class="flex items-center gap-1 hover:text-red-500">
                <el-icon><ChatDotRound /></el-icon>
                {{ post.comments }}
              </button>
            </div>
            <div class="flex gap-2">
              <el-tag
                v-for="tag in post.tags"
                :key="tag"
                size="small"
                effect="plain"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧边栏 -->
      <div class="space-y-6">
        <!-- 热门话题 -->
        <el-card>
          <template #header>
            <div class="font-bold">热门话题</div>
          </template>
          <div class="space-y-3">
            <div
              v-for="topic in topics"
              :key="topic.name"
              class="flex items-center justify-between hover:bg-gray-50 p-2 rounded cursor-pointer"
              @click="goToTopic(topic.id)"
            >
              <span class="text-blue-500"># {{ topic.name }}</span>
              <span class="text-gray-500 text-sm">{{ topic.count }}</span>
            </div>
          </div>
        </el-card>

        <!-- 发帖按钮 -->
        <el-button
          type="primary"
          class="w-full"
        >
          <el-icon class="mr-1"><Plus /></el-icon>
          发布帖子
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.el-card {
  &:hover {
    transform: translateY(-2px);
  }
}
</style>
